<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

<body>
    <div id="test">
        {{name}}{{age}}
        <input :type="myType" />
        <a v-if="flag==false">if1</a>
        <a v-else>if2</a>
        <a href="#" :style="{color:myColor,fontSize:pixx}">test</a>
        <a href="#" :style="[myColor2,mySize2]">test</a><br>
        <a href="#" v-on:click="num ++">add</a>{{num}}<br>
        <a href="#" @click="reduce">reduce</a><br>
        <span v-for="body in bodys">{{body}}<br></span>
        <span v-for="(value,key,index) in address">{{value}}---{{key}}---{{index}}<br></span>
        <input :type="typeName" @input="changeName" :value="myName" />{{myName}}
        <input :type="typeName" v-model="myName" /><br>
        <textarea v-model="textarea"></textarea>{{textarea}}<br><hr>
        <input type="checkbox" value="1" v-model="hobby">a
        <input type="checkbox" value="2" v-model="hobby">b{{hobby}}<hr>
        <input type="radio" name="sex" value="男" v-model="sex">
        <input type="radio" name="sex" value="女" v-model="sex">sex-----{{sex}}<br>
        <select v-model="selects">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
        </select>{{selects}}

    </div>
    <script>
        const a = new Vue({
            el: "#test",
            data() {
                return {
                    name: "spj", age: 18, myType: "date", myColor: "Red", pixx: "50px",
                    myColor2: { "color": "red" }, mySize2: { "fontSize": "10px" }, num: 1,
                    bodys: [{ name: "spj" }, { name: "sjf" }, { name: "sad" }],
                    address: {
                        a: 1, b: 2
                    },
                    typeName: "text", myName: "spj",
                    flag: true,
                    textarea: `sadsaasdawdas
                    sadsa
                    asd
                    `,
                    hobby: [],
                    sex:0,
                    selects:[]


                }
            },
            methods: {
                reduce() {
                    this.num--;
                },
                changeName(e) {
                    this.myName = e.target.value;
                }
            }
        });
    </script>
</body>

</html>